<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <div id="app">
    <h2>老黑记事本</h2>
    <div><input type="text" v-model=" word " @keypress.13="addMsg" placeholder="请输入任务"><section @click="addMsg">添加任务</section></div>
    <ul>
      <li v-for="(item,index) in phrase" :key="item.id">
        <p><span v-text="index+1 + '.'"></span><span>{{ item.value }}</span></p>
        <span class="del" @click="del(item.id)">&times;</span>
      </li>
    </ul>
    <div class="bom" v-show=" phrase.length !== 0 "><span>合计 ：{{phrase.length}}</span><button @click="reset">清空任务</button></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

  <script>
    // 函数
    
    // 获取 单个 元素
    function get(el, parent = document) {
      return parent.querySelector(el)
    }
    
    // 获取 多个 元素
    function gets(el, parent = document) {
      return [...parent.querySelectorAll(el)]
    }
    const app = new Vue({
      // 通过el配置选择器
      el: "#app",           //vue的使用范围
      // 通过data提供参数
      data: { // 响应式数据-data 的数据是会被添加到实例
        phrase:[],
        word:'',
      },
      methods:{
        // 添加事件
      addMsg(){
        // 的确有输入
        let value = this.word.trim()
        if(value){
          this.phrase.unshift({id:this.phrase.length,value})
        }
        this.word = ''
      },
      del(id){
        this.phrase = this.phrase.filter(item=>item.id !==id)
        alert('即将删除！')
      },
      reset(){
        this.phrase = []
      }
      }
    })
  
  
  </script>
</body>

</html>